<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <view class="uv-demo-block__content">
            <uv-line-progress :percentage="percentage1"> </uv-line-progress>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">不显示百分比</text>
         <view class="uv-demo-block__content">
            <uv-line-progress :showText="false" :percentage="percentage2"> </uv-line-progress>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义高度</text>
         <view class="uv-demo-block__content">
            <uv-line-progress height="8" :showText="false" :percentage="percentage3">
            </uv-line-progress>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义颜色</text>
         <view class="uv-demo-block__content">
            <uv-line-progress
               height="8"
               :showText="false"
               :percentage="percentage4"
               activeColor="#3c9cff"
               inactiveColor="#f3f4f6"
            >
            </uv-line-progress>
         </view>
      </view>
      <view class="uv-demo-block" v-if="!androidNvue">
         <text class="uv-demo-block__title">自定义样式(不支持安卓环境的nvue)</text>
         <view class="uv-demo-block__content">
            <uv-line-progress
               height="8"
               :showText="false"
               :percentage="percentage5"
               activeColor="#3c9cff"
               inactiveColor="#f3f4f6"
            >
               <text class="uv-percentage-slot">{{ percentage4 }}%</text>
            </uv-line-progress>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">手动加减</text>
         <view class="uv-demo-block__content">
            <uv-line-progress
               height="8"
               :showText="false"
               :percentage="percentage6"
               activeColor="#3c9cff"
               inactiveColor="#f3f4f6"
            >
            </uv-line-progress>
            <view class="button-group">
               <view
                  class="button-group__circle"
                  hover-class="uv-hover-class"
                  @click="computedWidth('minus')"
               >
                  <text class="button-group__circle__text">减少</text>
               </view>
               <view
                  class="button-group__circle"
                  hover-class="uv-hover-class"
                  @click="computedWidth('plus')"
               >
                  <text class="button-group__circle__text">增加</text>
               </view>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const androidNvue = ref(false);
const percentage1 = ref(30);
const percentage2 = ref(40);
const percentage3 = ref(50);
const percentage4 = ref(60);
const percentage5 = ref(70);
const percentage6 = ref(50);

const computedWidth = (type: string) => {
   if (type === 'plus') {
      percentage6.value = uni.$uv.range(percentage6.value + 10, 0, 100);
   } else {
      percentage6.value = uni.$uv.range(percentage6.value - 10, 0, 100);
   }
};
onLoad(() => {
   // #ifdef APP-NVUE
   androidNvue.value = uni.$uv.os() === 'android';
   // #endif
   uni.$uv.sleep(1000).then(() => {
      percentage1.value = 120;
   });
});
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';

.uv-percentage-slot {
   padding: 1px 5px;
   background-color: $uv-warning;
   color: #fff;
   border-radius: 100px;
   font-size: 10px;
   margin-right: -5px;
}

.uv-demo-block__content {
   flex-direction: column !important;
   flex-wrap: nowrap;
   align-items: stretch;
}

.button-group {
   @include flex;
   justify-content: center;

   &__circle {
      @include flex;
      width: 50px;
      height: 50px;
      background-color: #dbfbdb;
      border-radius: 100px;
      justify-content: center;
      align-items: center;
      margin: 30px 30px;

      &__text {
         color: rgb(25, 190, 107);
         font-size: 13px;
      }
   }
}
</style>
